<template>
  <!-- 编辑模块 -->
  <div class="page">
    <!-- <div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">用户管理</span>　|　<span>编辑用户</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
    <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="width:99.5%;margin-top:0.3rem;"> -->
    <!-- <el-tabs v-model="activeName" type="border-card"  style="width:99.5%;margin-top:0.3rem;padding:0!important;"> -->
    <div class="bottom_top" @click="changeBox">
      <div class="info" id="info" :class="box=='info'?'cardActive':''">用户信息</div>
      <div v-if="userType<=2" class="service" id="service" :class="box=='service'?'cardActive':''">扩展功能</div>
      <div class="pass" id="pass" :class="box=='pass'?'cardActive':''">重置密码</div>
    </div>
    <div v-if="box=='info'">
      <el-form :model="form" block class="addform">
        <!-- <el-form-item label="项目名称:" :label-width="formLabelWidth">
					<el-input v-model="form.project_name" class="inpu" readonly></el-input>
				</el-form-item> -->
        <el-form-item label="用户名称:" :label-width="formLabelWidth">
          <el-input v-model="form.user_name" auto-complete="off" class="inpu" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="用户类型:" :label-width="formLabelWidth" class="formline">
					<el-select v-model="form.user_type" disabled placeholder="" class="inpu">
						<el-option v-for="item in userTypes" :value="item.value" :key="item.value" :label="item.label">
						</el-option>
					</el-select>
				</el-form-item> -->
        <el-form-item label="手机号:" :label-width="formLabelWidth" class="formline">
          <el-input v-model="form.mobile" auto-complete="off" class="inpu" type="telephone" validate-event
            spellcheck="false" placeholder="请输入手机号"></el-input><br>
        </el-form-item>
        <el-form-item label="平台名称:" :label-width="formLabelWidth" v-if="site_auth==1" class="formline">
          <el-input v-model="form.site_name" auto-complete="off" class="inpu" placeholder="请输入平台名称" validate-event
            spellcheck="false" type="text"></el-input><br>
        </el-form-item>
        <!-- <el-form-item label="状态:" :label-width="formLabelWidth" class="formline">
          <el-switch v-model="form.user_state" :width="stateWidth" class="demo"
            style="display:inline-block;vertical-align:top;" active-color="#13ce66" inactive-color="#ccc"
            active-text="启用" inactive-text="冻结" :active-value="one" :inactive-value="zero">
          </el-switch>
        </el-form-item> -->
        <el-form-item label="状态:" :label-width="formLabelWidth" class="formline">
          <el-radio-group v-model="form.user_state">
            <el-radio :label="1" style="font-size:0.3rem;">启用</el-radio>
            <el-radio :label="0" style="font-size:0.3rem;">冻结</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="平台命名:" :label-width="formLabelWidth" class="formline_2">
          <el-switch v-model="form.site_auth" :width="stateWidth" class="demo"
            style="display:inline-block;vertical-align:top;" active-color="#13ce66" inactive-color="#ccc"
            active-text="开" inactive-text="关" :active-value="one" :inactive-value="zero">
          </el-switch>
        </el-form-item> -->
        <el-form-item label="平台命名:" :label-width="formLabelWidth" class="formline" style="margin-top:-0.4rem;">
          <el-radio-group v-model="form.site_auth">
            <el-radio :label="1" style="font-size:0.3rem;">开启</el-radio>
            <el-radio :label="0" style="font-size:0.3rem;">关闭</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="监控模式:" :label-width="formLabelWidth" class="formline">
          <el-select v-model="form.monitor_mode" placeholder="选择监控模式" class="inpu">
            <el-option v-for="item in viewModes" :value="item.value" :key="item.value" :label="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="form.monitor_mode==0" label="自定义监控菜单:" class="formline" style="margin-top:-0.1rem;"
          :label-width="formLabelWidth">
          <div class="sensorHead" ref="sensorHead">
            <!-- <span class="topTitle"  style="text-align: left;">默认名称</span> -->
            <span class="topTitle" style="margin-left:0.7rem;">名称</span>
            <span class="topTitle" style="width:1.2rem;margin-left:0.4rem;">排序</span>
            <span class="topTitle" style="margin-left:0.35rem;">是否显示</span>
            <span class="topTitle" style="margin-left:0.1rem;">默认监控</span>
          </div>
          <div v-for="(item,i) in form.monitor_menu" :key="item.key" class="oneDomain">
            <el-input class="inpu_2" v-model="item.title" :placeholder="item.title"></el-input>
            <el-input class="inpu_2" style="width:1.4rem;margin-left:0.5rem;margin-right:0.4rem" v-model="item.number"
              placeholder="排序"></el-input>
            <span class="oneBox" :class="item.isShow==1?'isChoose':'onChoose'"
              @click="chooseOneShow(i)"><span>√</span></span>

            <span class="oneBox" :class="item.isIndex==1?'isChoose':'onChoose'" style="margin-left:1.6rem;"
              @click="chooseOneIndex(i,item,item.isIndex)"><span>√</span></span>
          </div>
        </el-form-item>
      </el-form>
      <div style="text-align:left;margin-left:0.7rem;margin-top:-0.4rem;">
        <el-button type="success" size="small" @click="userUpdate">保存</el-button>
        <!-- <el-button type="primary" class="btn" @click="resetForm(form)">重置</el-button> -->
      </div>
    </div>
    <div v-if="box=='service'">
      <el-form :model="serviceForm" block class="addform">
        <el-form-item label="是否开发者:" :label-width="formLabelWidth" class="formline">
          <el-switch v-model="serviceForm.is_developer" :width="stateWidth" class="demo"
            style="display:inline-block;vertical-align:top;" active-color="#13ce66" inactive-color="#ccc"
            active-text="开" inactive-text="关" :active-value="one" :inactive-value="zero">
          </el-switch>
        </el-form-item>
        <el-form-item v-if="serviceForm.is_developer==1" label="AppID:" :label-width="formLabelWidth"
          style="margin-top:-0.2rem;">
          <el-input v-model.trim="serviceForm.app_id" auto-complete="off" class="inpu" style="width:8rem;" disabled
            id="appid" type="password"></el-input>
          <i class="el-icon-view flr" @click="showId"></i>
        </el-form-item>
        <el-form-item v-if="serviceForm.is_developer==1" label="AppSecret:" :label-width="formLabelWidth">
          <el-input v-model.trim="serviceForm.app_secret" auto-complete="off" class="inpu" style="width:8rem;" disabled
            id="secret" type="password"></el-input>
          <i class="el-icon-view flr" @click="showSecret"></i>
        </el-form-item>
        <el-form-item v-if="serviceForm.is_developer==1" label="IP白名单:" :label-width="formLabelWidth">
          <el-input v-model="serviceForm.whitelist" auto-complete="off" class="inpu" style="width:8rem;" id="surePass"
            type="textarea" :rows="4" placeholder="可为空,请输ip白名单,多个用英文逗号','间隔"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="success" class="btn" @click="serviceConfig">保存</el-button>
        <!-- <el-button type="primary" @click="resetForm(pwdForm)">重置</el-button> -->
      </div>
    </div>
    <div v-if="box=='pass'">
      <el-form :model="pwdForm" block class="addform">
        <el-form-item label="新密码:" :label-width="formLabelWidth">
          <el-input v-model="pwdForm.user_pass" auto-complete="off" class="inpu" id="newPass" type="password"
            placeholder="请输入新密码"></el-input><i class="el-icon-view flr" @click="showNewPass"></i><br>
        </el-form-item>
        <el-form-item label="确认密码:" :label-width="formLabelWidth">
          <el-input v-model="pwdForm.check_pass" auto-complete="off" class="inpu" id="surePass" type="password"
            placeholder="请再次输入新密码"></el-input><i class="el-icon-view flr" @click="showSurePass"></i><br>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="success" class="btn" @click="editPwd">保存</el-button>

      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'editUser',
    data() {
      return {
        one: 1,
        zero: 0,
        two: 2,
        dialogFormVisible: false,
        activeName: 'first',
        stateWidth: 60,
        formLabelWidth2: '80px',
        formLabelWidth: '140px',
        box: 'info',
        value: '',
        userType: Number(localStorage.getItem("atuser_type")),
        //自己的平台命名权限
        site_auth: Number(localStorage.getItem("site_auth")),
        //grade: localStorage.getItem("grade"),
        id: localStorage.getItem("editUserId"),
        loc: '',
        // pages:[
        // 	{
        // 	   value:1,
        // 	   label:"设备地图(默认)"
        //     },{
        // 	   value:2,
        // 	   label:"监控中心"
        //     },{
        // 	   value:3,
        // 	   label:"大屏监控"
        //     }
        // ],
        // showProducts:[
        // 	{
        // 		value:1,
        // 		label:'展开'
        // 	},
        // 	{
        // 		value:0,
        // 		label:'折叠'
        // 	}
        // ],
        viewModes: [{
            value: 0,
            label: '标准模式'
          },
          {
            value: 1,
            label: '组态模式'
          },
        ],
        userTypes: [{
            value: 2,
            label: '普通管理员'
          },
          {
            value: 3,
            label: '普通用户'
          }
        ],
        form: {
          id: 0,
          //grade:1,
          //products_view:1,
          user_name: '',
          mobile: '',
          user_type: 2,
          //email: '',
          site_name: '',
          //index_page:1,
          site_auth: 0, //子用户的命名权限
          user_state: '',
          monitor_mode: 0,
          monitor_menu: []
          //enable_create: '',
          // enable_receive: '',
          // equip_auth: '',
          // parent: '',
          // parent_id: '',
          //parent_grade:1
        },
        serviceForm: {
          id: 0,
          whitelist: "",
          app_id: '',
          app_secret: '',
          is_developer: 0,
        },
        pwdForm: {
          user_pass: '',
          check_pass: ''
        }
        // powerForm: {
        //     isAdmin: '',
        //     isCreate: '',
        //     isGetAlarm: '',
        //     power: ''
        // }
      }
    },
    created() {
      this.id = localStorage.getItem("editUserId");
      // if(this.grade==2){
      // 	this.pages.shift();
      // }
      this.getUserInfo();
    },

    methods: {
      goBack() {
        this.$router.go(-1);
      },
      getUserInfo() {
        var that = this;
        this.$http({
          method: 'post',
          url: 'api/user/info',
          data: {
            "id": this.id

          }
        }).then(res => {
          if (res && res.data.result == "success") {
            for (let key in this.form) {
              this.form[key] = res.data.data[key];
            }

            for (let key in this.serviceForm) {
              this.serviceForm[key] = res.data.data[key];
            }
            // if(this.form.grade==3){
            // 	this.pages.shift();
            // }
          }
        }).catch(error => {
          console.log(error)
        });
      },

      changeBox(event) {
        if (event.target.id) {
          this.box = event.target.id;
        } else {
          this.box = "info";
        }
      },

      chooseOneIndex(n, item, isIndex) {
        this.form.monitor_menu[n].isIndex = this.form.monitor_menu[n].isIndex == 1 ? 0 : 1;
        if (this.form.monitor_menu[n].isIndex) {
          this.form.monitor_menu[n].isShow = 1;
          for (let i = 0, len = this.form.monitor_menu.length; i < len; i++) {
            if (this.form.monitor_menu[i].key != item.key) {
              this.form.monitor_menu[i].isIndex = 0;
            }
          }
        }
        let without = this.form.monitor_menu.every(function(item, index, arr) {
          return item.isIndex == 0
        })
        if (without) {
          this.form.monitor_menu[0].isIndex = 1;
          this.form.monitor_menu[0].isShow = 1;
        }

      },

      //选中当前一个或取消的函数；
      chooseOneShow(index) {
        this.form.monitor_menu[index].isShow = this.form.monitor_menu[index].isShow == 1 ? 0 : 1;
        if (this.form.monitor_menu[index].isShow == 0 && this.form.monitor_menu[index].isIndex == 1) {
          this.$message({
            message: '默认监控项必须显示，或先取消默认!',
            type: 'info',
            center: true
          })
          this.form.monitor_menu[index].isShow = 1;
          return
        }
        let without = this.form.monitor_menu.every(function(item, index, arr) {
          return item.isShow == 0
        })
        if (without) {
          this.$message({
            message: '请至少保留一个菜单!',
            type: 'info',
            center: true
          })
          this.form.monitor_menu[index].isShow = 1;
        }
      },

      userUpdate() {
        var that = this;
        this.$http({
          method: 'post',
          url: 'api/user/update',
          data: that.form
        }).then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              message: '恭喜，用户修改成功!',
              type: 'success',
              center: true
            });
          } else {
            this.getUserInfo();
          }
        }).catch(error => {
          console.log(error);
          this.getUserInfo();
        });
      },

      serviceConfig() {
        var that = this;
        this.$http({
          method: 'post',
          url: 'api/user/serviceConfig',
          data: that.serviceForm
        }).then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              message: '恭喜，扩展功能配置成功!',
              type: 'success',
              center: true
            });
            if (!this.serviceForm.app_id || !this.serviceForm.app_secret) {
              this.getUserInfo();
            }
          } else {
            this.getUserInfo();
          }
        }).catch(error => {
          console.log(error);
          this.getUserInfo();
        });
      },

      showId(event) {
        if (document.getElementById("appid").type == "password") {
          document.getElementById("appid").type = "text";
          event.target.style.color = "deepskyblue";
        } else {
          document.getElementById("appid").type = "password";
          event.target.style.color = "#ccc";
        }

      },
      showSecret(event) {
        if (document.getElementById("secret").type == "password") {
          document.getElementById("secret").type = "text";
          event.target.style.color = "deepskyblue";
        } else {
          document.getElementById("secret").type = "password";
          event.target.style.color = "#ccc";
        }
      },

      showNewPass(event) {
        if (document.getElementById("newPass").type == "password") {
          document.getElementById("newPass").type = "text";
          event.target.style.color = "deepskyblue";
        } else {
          document.getElementById("newPass").type = "password";
          event.target.style.color = "#ccc";
        }
      },

      showSurePass(event) {
        if (document.getElementById("surePass").type == "password") {
          document.getElementById("surePass").type = "text";
          event.target.style.color = "deepskyblue";
        } else {
          document.getElementById("surePass").type = "password";
          event.target.style.color = "#ccc";
        }
      },



      editPwd() {
        var that = this;
        this.pwdForm.id = this.id;
        if (this.pwdForm.user_pass === this.pwdForm.check_pass) {
          this.$http({
            method: 'post',
            url: 'api/user/updatePassword',
            data: that.pwdForm
          }).then(res => {
            if (res && res.data.result == "success") {
              this.$message({
                message: '恭喜，密码修改成功!',
                type: 'success',
                center: true
              });
            }
          }).catch(error => {
            console.log(error)
          });
        } else {
          this.$message({
            message: '两次密码不一致，请重新输入!',
            type: 'error',
            center: true
          });
        }
      }
    }
  }
</script>

<style scoped>
  @media all and (max-width:1600px) {
    .formline {
      margin-top: -0.5rem !important;
    }
  }

  .addform {
    /* width:18%; */
    text-align: left;
    margin-top: 0.3rem;
    height: auto;
    /* border: 1px solid red; */
  }

  .bottom_top {
    height: 0.8rem;
    line-height: 0.8rem;
  }

  .inpu {
    width: 5rem;
  }

  .formline {
    margin-top: -0.2rem;
  }

  .formline_2 {
    margin-top: -0.4rem;
  }

  .info,
  .service,
  .pass {
    float: left;
    width: 2.2rem;
    text-align: center;
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.35rem;
    cursor: pointer;
    /* background-color: #B7873C; */
  }


  .flr {
    font-size: 0.4rem;
    vertical-align: middle;
    margin-left: 0.1rem;
    color: #ccc;
  }

  .sortIcon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.1rem;
    width: 0.3rem !important;
    height: 0.3rem;
    font-size: 0.25rem;
    line-height: 0.3rem;
    text-align: center;
    color: #999;
    background-color: #ccc;
  }

  @media all and (max-width:2560px) {
    .sensorHead {
      width: 25% !important;
    }

  }

  @media all and (max-width:1920px) {
    .sensorHead {
      width: 35% !important;
    }

  }

  @media all and (max-width:1600px) {
    #addform {
      margin-left: -0.3rem !important;
    }

    .oneDomain {
      margin-top: 0.2rem !important;
    }
  }

  @media all and (max-width:1366px) {
    #addform {
      width: 100% !important;
      margin-left: 0rem !important;
    }

    /* .tip {
	        font-size: 0.4rem!important;
	    } */
  }


  .sensorHead {
    margin-left: 0 !important;
    height: 0.8rem;
    line-height: 0.8rem;
    /* border:1px solid red; */
    width: 60%;
    border-bottom: 1px solid #111;
    margin: -0.2rem 0 0.1rem 0;
    padding: 0;
    padding-left: 0.2rem;
  }

  .oneDomain>>>.el-input__inner {
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    height: 0.6rem !important;
    line-height: 0.6rem !important;
    border: none;
    margin-top: -0.1rem;
    border: 1px solid #ccc !important;

  }

  .oneDomain>>>.el-select__caret {
    font-size: 12px;
  }

  .oneDomain>>>.el-input__icon {
    width: 14px;
  }

  .inpu {
    width: 5rem;
    vertical-align: middle;
    /* transform: translateY(0.1rem)!important; */
  }

  .inpu_2 {
    width: 2.2rem;
    margin-right: 0.1rem;
    height: 0.6rem !important;
    line-height: 0.6rem !important;
    text-align: center;
    vertical-align: middle;
    border: none;
  }

  .topTitle {
    display: inline-block;
    width: 2rem;
    height: 0.6rem !important;
    line-height: 0.6rem !important;
    /* text-align: center; */
    vertical-align: middle;

  }

  .oneDomain {
    margin-left: 0.4rem;
    height: 0.7rem;
    line-height: 0.7rem;
    width: 60%;
    /* margin-top:-0.2rem; */
    white-space: nowrap;
  }

  .oneBox,
  .typeBox {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem !important;
    line-height: 0.5rem;
    text-align: center;
    transform: translateY(2px);
    margin-left: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    overflow:hidden;

  }

  .typeBox {
    margin: 0;
  }

  .isChoose {
    border: 1px solid #409eff;
    color: #fff;
    background-color: #409eff;
  }

  .onChoose {
    border: 1px solid #ccc;
    color: #fff;
    background-color: #fff;
  }

  .inpu /deep/ .el-input__inner {
    padding-left: 4px;
    padding-right: 4px;
  }

  .inpu /deep/ .el-textarea__inner {
    padding-left: 4px;
    padding-right: 4px;
  }
</style>
